<template>
  <gimi-dialog
    v-model="visible"
    :title="modalTitle"
    :okText="okText"
    :okLoading="okLoading"
    @cancel="handleCancel"
    @ok="handleSubmitForm"
  >
    <el-form ref="formRef" :model="form" :rules="rules">
      <el-form-item prop="name">
        <el-input ref="inputRef" v-model="form.name" size="large" placeholder="请输入文件夹名称" />
      </el-form-item>
    </el-form>
  </gimi-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits, defineProps, PropType, computed, onMounted, nextTick } from 'vue'
import { ElMessage, ElForm, ElInput } from 'element-plus'
import { ruleRequired, ruleMaxLength } from '@/utils/rules'
import { apiCreateFolder, apiUpdateFolder, apiMindRename } from '@/apis/work'
import { apiRenameMap } from '@/apis/mind'
import type { Folder, Mind } from '@/types'

const emits = defineEmits(['close-modal'])
const props = defineProps({
  folderDetail: {
    type: Object as PropType<Folder | null>,
    default: () => null
  },
  mindDetail: {
    type: Object as PropType<Mind | null>,
    default: () => null
  },
  mapDetail: {
    type: Object,
    default: () => null
  },
  operateType: {
    type: String as PropType<'folder' | 'mind' | 'map'>
  },
  folderId: String
})

const visible = ref(true)
const formRef = ref<InstanceType<typeof ElForm>>()
const inputRef = ref<InstanceType<typeof ElInput>>()
const form = reactive({
  name: '新建文件夹'
})
const rules = {
  name: [ruleRequired(), ruleMaxLength(24)]
}

const handleInitFillFormValues = () => {
  if (props.folderDetail) {
    const { id, name } = props.folderDetail
    Object.assign(form, { id, name })
  } else if (props.mindDetail) {
    const { id, name } = props.mindDetail
    Object.assign(form, { id, name })
  } else if (props.mapDetail) {
    Object.assign(form, props.mapDetail)
  }
}

onMounted(() => {
  handleInitFillFormValues()
  nextTick(() => {
    inputRef.value?.focus()
  })
})

const okLoading = ref(false)
const handleSubmitForm = async () => {
  await formRef.value?.validate()
  try {
    okLoading.value = true
    const API = props.operateType === 'map' ? apiRenameMap
      : props.operateType === 'folder'
        ? props.folderDetail
          ? apiUpdateFolder
          : apiCreateFolder
        : apiMindRename
    const searchParams = {
      ...form,
      parentId: props.operateType === 'folder' && !props.folderDetail ? props.folderId : undefined
    }
    await API(searchParams)
    ElMessage.success('操作成功')
    handleCancel(true, form)
  } finally {
    okLoading.value = false
  }
}

const modalTitle = computed(() => {
  if (props.operateType === 'map') return '画布重命名'
  if (props.operateType === 'folder') {
    return props.folderDetail ? '文件夹重命名' : '新建文件夹'
  }
  return '导图重命名'
})

const okText = computed(() => {
  if (props.operateType === 'folder' && !props.folderDetail) return '创建'
  return '重命名'
})

const handleCancel = (refresh = false, detail) => {
  emits('close-modal', refresh, detail)
}
</script>

<style lang="scss" scoped></style>
